<!--
 * @Description: 模拟协同云跳转页 
 * @Author: 黄勇
 * @Date: 2020-03-09 15:36:26
 * @LastEditTime: 2021-03-10 18:55:42
 * @LastEditors: Please set LastEditors
 -->
<template>
    <div class="login">
        <CloudInput v-model="input" placeholder="请输入cookie中的testAuthorization字段"></CloudInput>
        <CloudButton type="primary" @click="mockLogin">确定</CloudButton>
    </div>
</template>

<script>
import {CloudInput,CloudButton} from 'cloud-components';
import {
  createNamespacedHelpers
} from 'vuex';

const {
  mapState,
  mapMutations,
  mapActions
} = createNamespacedHelpers('user');

export default {
  name: 'login',
  components: {
    CloudInput,
    CloudButton
  },
  computed: {},
  data: () => ({
    input: ''
  }),
  methods: {
    ...mapMutations([
      'SET_USERINFO'
    ]),
    mockLogin() {
      document.cookie = 'authorization='+ this.input;
      this.getUserInfo();
    },
    getUserInfo() {
      this.api.getUserInfo({}, {method: 'get', customRequest: true})
        .then(res => {
          this.SET_USERINFO(res.data);
          this.redirectToCloudDesignCenter();
        });
    },
    redirectToCloudDesignCenter(user) {
      this.$router.push({
        path: '/',
        query: {}
      });
    }
  }
};
</script>

<style lang="scss">
.login {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 60px;
    padding-left: 80px;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    .user {
        flex: 0 0 200px;
        width: 200px;
        height: 60px;
        margin-top: 20px;
        margin-right: 20px;
        border: 1px solid #dfdfdf;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 10px 20px;
    

    cursor: pointer;
    &:hover {
        border-color: #336CFB;
    }
    &>p {
        width: 100%;
        text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    &:first-child{
        font-size: 20px;
    }
    }
    }
    
}
</style>